<template>
  <div class="temp-container" v-loading="pageLoading">
    <el-table :data="state.tableData" size="small" height="500" @row-click="rowClick" row-key="time" :row-class-name="({row}: any) => row.is_active ? 'is-active' : ''" header-row-class-name="table-header">
      <el-table-column property="t" label="时间"  :formatter="(row: any) => dayjs(row.t).format('YYYY-MM-DD HH:mm:ss')"/>
      <el-table-column property="v" label="体温"/>
      <el-table-column property="result" label="结果" >
        <template #default="{ row }">
          <span :style="{color: res(row.v)?.color, fontWeight: 600}">{{ res(row.v)?.label }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="scatter-chart">
      <CommonChart 
        class="chart-container-content"
        ref="commonChartRef"
        height="500px"
        width="700px"
        :fullOptions="{
          options: option
        }"
        :loading="false"
        :id="`temp-scatter-chart`"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import CommonChart from '@/components/echarts/index.vue'
import { useScatterChart } from './scatter-chart'
import dayjs from 'dayjs'
const props = defineProps({
  config: {
    type: Object,
    default: () => {}
  },
  visible: {
    type: Boolean,
    default: false
  },
  deviceId: {
    type: String,
    default: ''
  }
}) as {
  config: {},
  visible: boolean,
  deviceId: string
}

let option = {
  title: {
    text: 'TEMP 数据列表',
    bottom: '0',
    left: 'center'
  },
  xAxis: {
    type: 'time',
    splitNumber: 3,
    axisLabel: {
      formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'
    }
  },
  yAxis: {
    name: '°C',
    // nameTextStyle: {
    //   fontWeight: 600,
    //   fontSize: '16px'
    // },
    nameLocation: 'start',
    min: 35,
    max: 41
  },
  tooltip: {
    show: true,
  },
  grid: {
    top: '20', right:'20'
  },
  series: [
    {
      symbolSize: 8,
      data: [],
      type: 'scatter',
      emphasis: {
        label:{
          // show: true
        },
        itemStyle: {
          color: '#fff',
          borderColor: 'red',
          borderWidth: 2
        }
      },
      markArea: {
        tooltip: {
          show: false
        },
        emphasis: {
          disabled: true
        },
        data: [
          [
            {yAxis: '39',itemStyle: {color: 'rgb(191 73 81)'}},
            { yAxis: '41'}
          ],
          [
            {yAxis: '38',itemStyle: {color: 'rgb(216 153 151)'}},
            { yAxis: '39'}
          ],
          [
            {yAxis: '37',itemStyle: {color: 'rgb(232 196 153)'}},
            { yAxis: '38'}
          ],
          [
            {yAxis: '36',itemStyle: {color: 'rgb(160 203 154)'}},
            { yAxis: '37'}
          ],
          [
            { yAxis: '35',itemStyle: {color: 'rgb(160 196 228)'}},
            { yAxis: '36'}
          ],
        ]
      }
    },
  ]
};
const {
  commonChartRef,
  rowClick,
  state,
  pageLoading
} = useScatterChart(option, props, 't', 'v')


const res = computed(() => {
  return (val: number) => {
    if(val >= 36.3 && val <= 37.2) {
    return {
      label: '正常体温',
      color: '#A1CB9A'
    }
  } else if(val > 37.2 && val <= 38) {
    return {
      label: '低热',
      color: '#E8C498'
    }
  } else if(val > 38 && val <= 39) {
    return {
      label: '中度发热',
      color: '#D89997'
    }
  } else if(val > 39 && val <= 41) {
    return {
      label: '高度发热',
      color: '#BF4951'
    }
  }
  }
})

</script>
<style lang="less" scoped>
.temp-container {
  display: flex;
  // .scatter-chart {
  //   width: 50%;
  // }
  :deep(.is-active) {
    background-color: rgb(16 196 207);
    color: #fff;
  }
  :deep(.el-table__row.is-active):hover,
  :deep(.el-table--enable-row-hover .el-table__body tr.is-active:hover>td.el-table__cell) {
    background-color: rgb(16 196 207) !important;
  }
  :deep(.el-table th.el-table__cell) {
    background-color: rgb(25 144 255);
    color: #fff;
  }
}
</style>
